<template>
  <el-form ref="ruleFormRef" :rules="rules" :model="formConfig.dataObj" class="fixed-label-width">
    <el-form-item label="店铺名称" prop="storeName">
      <el-input v-model="formConfig.dataObj.storeName" />
    </el-form-item>
    <el-form-item label="合作价格" prop="storePrice">
      <el-input v-model="formConfig.dataObj.storePrice" type="number" />
      <span style="margin-left: 10px; color: #888">(元 / 份)</span>
    </el-form-item>
    <el-form-item label="店铺地址" prop="storeAddress">
      <el-input v-model="formConfig.dataObj.storeAddress" type="textarea" />
      <hz-button type="primary" link @click='mapDialogShow=true'>打开地图选点</hz-button>
    </el-form-item>
    <el-form-item label="店主姓名" prop="merchantName">
      <el-input v-model="formConfig.dataObj.merchantName" />
    </el-form-item>
    <el-form-item label="店主手机号" prop="merchantPhone">
      <el-input v-model="formConfig.dataObj.merchantPhone" />
    </el-form-item>
    <el-form-item label="备注" prop="description">
      <el-input v-model="formConfig.dataObj.description" type="textarea" />
    </el-form-item>
  </el-form>

  <div class="dialog-footer my-dialog-foot">
    <hz-button type="primary" @click="clickSubmit">确定</hz-button>
    <hz-button @click="clickCancle">取消</hz-button>
  </div>

  <!-- 地图 -->
  <hz-dialog v-model="mapDialogShow" title="地图选点" fullscreen>
    <myMap :addressClick="addressClick" :close="closeMap" ref="mapRef" :lngLat="lngLatData" />
  </hz-dialog>
</template>
<script setup>
import { ref, reactive, computed, getCurrentInstance } from "vue";
import { useStore } from "vuex";
import myMap from '@/views/common/map.vue'
import { ElMessage } from 'element-plus'

const store = useStore();
const mapDialogShow = ref(false)
const { proxy } = getCurrentInstance();
const props = defineProps({
  formConfig: {
    default: {
      dataObj: {},
      dialog: {},
      type: '',
      okCallback: () => { },
      noCallback: () => { },
    }
  },
});


/*-- 数据提交 --*/
const ruleFormRef = ref(null);
// 表单校验规则
const rules = reactive({
  storeName: [{ required: true, message: "名称不能为空", trigger: "blur" }],
  storePrice: [{ required: true, message: "合作价格不能为空", trigger: "blur" }],
  storeAddress: [{ required: true, message: "地址不能为空", trigger: "blur" }],
});
// 点击确定，提交数据
function clickSubmit() {
  if (!ruleFormRef.value) return
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      submitForm();
    } else {
      console.log('提交校验不通过', fields)
    }
  })
}
// 提交新增 或编辑
function submitForm() {
  let params = getSubmitParam();
  if (!params) {
    return;
  }
  proxy.$http.post('/company/storeManage/addOrUpdateStore', params, { successTip: true }).then(res => {
    if (res.code == 200) {
      props.formConfig.dialog.show = false;
      props.formConfig.okCallback();
    }
  })
}
// 获取要保存的数据
function getSubmitParam() {
  let params = { ...props.formConfig.dataObj }
  // params.storePrice = (params.storePrice * 100).toFixed(0)
  if (params.id) {
    params.storeId = params.id    // 说明是编辑
  }
  console.log(params)
  return params
}


/*-- 地图 --*/
const mapRef = ref(null);
// 地图数据
let lngLatData = computed(() => {
  return {
    lng: props.formConfig.dataObj.longitude,
    lat: props.formConfig.dataObj.latitude,
  }
})
// 地图上选点后确定返回数据
function addressClick(data) {
  let obj = props.formConfig.dataObj
  obj.storeAddress = data.address
  obj.longitude = data.lng
  obj.latitude = data.lat
}
// 退出地图
function closeMap() {
  mapDialogShow.value = false;
}


// 点击取消的回调
function clickCancle() {
  props.formConfig.dialog.show = false;
}

// 对外暴露数据
defineExpose({});
</script>

<style lang="scss" scoped>
.food-typep-item {
  width: 360px;
}
</style>
